<template>
  <el-form
    ref="form"
    size="mini"
    :rules="rules"
    :model="formData"
    label-width="130px"
  >
    <el-row v-if="operate === 2">
      <el-col :span="24">
        <el-form-item label="地图数据编号：">
          <label>{{ formData.id }}</label>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="所属行政区域：" prop="districtId">
          <el-cascader
            v-if="operate === 0 || operate === 1"
            :options="districtTree"
            :props="districtListProps"
            v-model="formData.districtId"
            style="width: 100%"
          />
          <label v-else-if="operate === 2">{{
            formatterDistrict(formData.districtId)
          }}</label>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="类型：" prop="type">
          <el-select
            v-if="operate === 0 || operate === 1"
            v-model="formData.type"
            style="width: 100%"
          >
            <el-option
              v-for="item in typeArray"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <label v-else-if="operate === 2">{{
            formatterType(formData.type)
          }}</label>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="geojson数据：" prop="geojson">
          <el-input
            :disabled="operate !== 0 && operate !== 1"
            type="textarea"
            placeholder="请输入"
            :rows="10"
            v-model="formData.geojson"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="状态：">
          <el-select
            v-if="operate === 0 || operate === 1"
            v-model="formData.state"
            style="width: 100%"
          >
            <el-option
              v-for="item in stateArray"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <label v-else-if="operate === 2">{{
            formatterState(formData.state)
          }}</label>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row v-if="operate === 2">
      <el-col :span="12">
        <el-form-item label="中心点经度：">
          <label>{{ formData.centerLng }}</label>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="中心点纬度：">
          <label>{{ formData.centerLat }}</label>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row v-if="operate === 2">
      <el-col :span="12">
        <el-form-item label="最大经度：">
          <label>{{ formData.maxLng }}</label>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="最小经度：">
          <label>{{ formData.minLng }}</label>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row v-if="operate === 2">
      <el-col :span="12">
        <el-form-item label="最大纬度：">
          <label>{{ formData.maxLat }}</label>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="最小纬度：">
          <label>{{ formData.minLat }}</label>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row v-if="operate === 0 || operate === 1">
      <el-col :span="24" align="center">
        <el-button type="primary" size="mini" @click="add">保存</el-button>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import { addMap, updateMap } from "../../axios/api";
import { Message } from "element-ui";

export default {
  props: [
    "formData",
    "operate",
    "districtTree",
    "districtArray",
    "typeArray",
    "stateArray"
  ],
  data() {
    return {
      rules: {
        districtId: [
          { required: true, message: "请选择所属行政区域", trigger: "change" }
        ],
        type: [
          { required: true, message: "选择地图数据类型", trigger: "change" }
        ],
        geojson: [
          { required: true, message: "请输入geojson数据", trigger: "blur" }
        ]
      },
      districtListProps: {
        expandTrigger: "hover",
        checkStrictly: true,
        emitPath: false,
        value: "id",
        label: "name"
      }
    };
  },
  methods: {
    formatterDistrict(cellValue) {
      let value = this.districtArray.filter(item => {
        return item.id === cellValue;
      })[0];
      if (value) return value.name;
      else return "不存在的行政区域";
    },
    formatterType(cellValue) {
      let value = this.typeArray.filter(item => {
        return item.value === cellValue;
      })[0];
      if (value) return value.label;
      else return "不存在的类型";
    },
    formatterState(cellValue) {
      let value = this.stateArray.filter(item => {
        return item.value === cellValue;
      })[0];
      if (value) return value.label;
      else return "不存在的状态";
    },
    add() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.operate === 0) {
            addMap(
              this.formData,
              () => {
                Message({
                  showClose: true,
                  message: "添加成功！",
                  type: "success"
                });
                this.$emit("hiddenDetailDialog", false);
              },
              res => {
                Message({
                  showClose: true,
                  message: res.msg,
                  type: "error"
                });
              }
            );
          } else if (this.operate === 1) {
            updateMap(
              this.formData,
              () => {
                Message({
                  showClose: true,
                  message: "更新成功！",
                  type: "success"
                });
                this.$emit("hiddenDetailDialog", false);
              },
              res => {
                Message({
                  showClose: true,
                  message: res.msg,
                  type: "error"
                });
              }
            );
          }
        }
      });
    },
    clearValidate() {
      this.$nextTick(() => {
        this.$refs["form"].clearValidate();
      });
    }
  }
};
</script>
